<script setup lang="ts">
import { svg1688, svgdoudian } from '#/base';

const props = defineProps({
  orderInfo: {
    type: Object,
    default: () => ({}),
  },
});
const record = props.orderInfo;
function getTagColor(status: number) {
  switch (status) {
    case 2: {
      return 'cyan';
    }
    case 3: {
      return 'purple';
    }
    case 4: {
      return 'error';
    }
    case 5: {
      return 'green';
    }
    case 105: {
      return 'blue';
    }
    default: {
      return 'default';
    }
  }
}

function gettagColor1688(status: string) {
  switch (status) {
    case 'cancel': {
      return 'volcano';
    }
    case 'confirm_goods': {
      return 'cyan';
    }
    case 'success': {
      return 'green';
    }
    case 'terminated': {
      return 'error';
    }
    case 'waitbuyerpay': {
      return 'processing';
    }
    case 'waitbuyerreceive': {
      return 'lime';
    }
    case 'waitbuyersend': {
      return 'geekblue';
    }
    case 'waitselleragree': {
      return 'purple';
    }
    case 'waitsellersend': {
      return 'gold';
    }
    default: {
      return 'default';
    }
  }
}
</script>

<template>
  <div>
    <a-timeline>
      <a-timeline-item :color="record.dyOrderStatus === 4 ? 'red' : 'green'">
        <a-space align="start">
          <a-space style="width: 92px">
            <img :src="svgdoudian" alt="" style="width: 16px" />
            <div>订单状态:</div>
          </a-space>

          <a-tag :color="getTagColor(record.dyOrderStatus)">
            {{ record.dyOrderStatusName }}
          </a-tag>
        </a-space>
      </a-timeline-item>
      <a-timeline-item :color="record.aliOrderId ? 'green' : 'gray'">
        <a-space align="start">
          <a-space style="width: 92px">
            <img :src="svg1688" alt="" style="width: 16px" />

            <div>采购状态:</div>
          </a-space>
          <a-tag :color="gettagColor1688(record.aliOrderStatus)">
            {{ record.aliOrderStatusName || '-' }}
          </a-tag>
        </a-space>
      </a-timeline-item>
      <a-timeline-item :color="record.aliOrderId ? 'green' : 'gray'">
        <a-space align="start">
          <a-space style="width: 92px">
            <div style="font-size: 16px; color: coral">
              <svg
                height="1em"
                viewBox="0 0 24 24"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M13.07 10.41a5 5 0 0 0 0-5.82A3.4 3.4 0 0 1 15 4a3.5 3.5 0 0 1 0 7a3.4 3.4 0 0 1-1.93-.59M5.5 7.5A3.5 3.5 0 1 1 9 11a3.5 3.5 0 0 1-3.5-3.5m2 0A1.5 1.5 0 1 0 9 6a1.5 1.5 0 0 0-1.5 1.5M16 17v2H2v-2s0-4 7-4s7 4 7 4m-2 0c-.14-.78-1.33-2-5-2s-4.93 1.31-5 2m11.95-4A5.32 5.32 0 0 1 18 17v2h4v-2s0-3.63-6.06-4Z"
                  fill="currentColor"
                />
              </svg>
            </div>

            <div>采购账号:</div>
          </a-space>
          <div>{{ record.purchaseName || '-' }}</div>
        </a-space>
      </a-timeline-item>
      <a-timeline-item :color="record.aliOrderId ? 'green' : 'gray'">
        <a-space align="start">
          <a-space style="width: 92px">
            <div style="font-size: 16px; color: coral">
              <svg
                height="1em"
                viewBox="0 0 24 24"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14a2 2 0 0 0 2 2h14c1.11 0 2-.89 2-2V5a2 2 0 0 0-2-2m-7 0c.55 0 1 .45 1 1s-.45 1-1 1s-1-.45-1-1s.45-1 1-1m7 16H5V5h2v2h10V5h2zM8 12h8v2H8z"
                  fill="currentColor"
                />
              </svg>
            </div>
            <div>采购订单:</div>
          </a-space>
          <div>{{ record.aliOrderId || '-' }}</div>
        </a-space>
      </a-timeline-item>
    </a-timeline>
  </div>
</template>
